<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <style>
        html {
            height: 100%;
            background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574153033607&di=c090cb14b49e9affbdc6fb5283f63836&imgtype=0&src=http%3A%2F%2Fp0.qhimgs4.com%2Ft01604a0c915b38d0da.gif");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }

        body {
            /*background-image: url("11111.gif");*/
            /*background-repeat: no-repeat;*/
            /*background-size: 100% 100%;*/
            /*overflow: hidden;*/
            /*background-color: greenyellow;*/
        }

        .block {
            /*border: 2px solid red;*/
            margin: 0 auto;
            /*background-color: red;*/

        }
        .h3{
            color: black;
        }
        .userCenterBox {
            margin: 0 auto;
        }

        #userCenter01 {
            position: relative;
        }

        #userCenter02 {
            position: absolute;
            left: 385px;
            top: 6px;
        }

        #wen1 {
            font-size: 20px;
            margin-left: 40px;
            color: deeppink;
        }

        #wen2 {
            font-size: 20px;
            color: deeppink;
        }

        #wen3 {
            font-size: 20px;
            color: deeppink;
        }

        #ul2 {
            display: block;
            position: relative;
        }

        #ul4 {
            display: block;
            position: relative;
        }

        #ul1 {
            top: 150px;
            display: block;
            position: relative;
        }

        #ul3 {
            display: block;
            position: relative;

        }

        .li1 {
            float: left;
            position: absolute;
            border-radius: 10%;
            box-shadow: 0 0 1000px violet;
        }

        #wen1li {

            display: block;
            left: 170px;
            position: absolute;
        }

        #wen3li {

            display: block;
            left: 470px;
            position: absolute;
        }

        #wen2li {
            display: block;
            left: 210px;
            top: 50px;
            position: absolute;
        }

        #li11 {
            border: 2px solid blue;
            width: 200px;
            height: 350px;
            display: block;
            left: 200px;
            /*background-color: #2aabd2;*/
            filter: drop-shadow(0px 0px 0px white);

        }

        #li12 {
            border: 2px solid red;
            width: 200px;
            height: 350px;
            display: block;
            left: 430px;
            /*background-color: #2aabd2;*/
            filter: drop-shadow(0px 0px 0px white);

        }

        #li13 {
            border: 2px solid blue;
            width: 200px;
            height: 350px;
            display: block;
            left: 663px;
            /*background-color: #2aabd2;*/
            filter: drop-shadow(0px 0px 0px white);

        }

        #li14 {
            border: 2px solid pink;
            width: 200px;
            height: 350px;
            display: block;
            left: 900px;
            /*background-color: #2aabd2;*/
            filter: drop-shadow(0px 0px 0px white);

        }

        #li15 {
            border: 2px solid black;
            width: 200px;
            height: 350px;
            display: block;
            left: 1130px;
            /*background-color: #2aabd2;*/
            filter: drop-shadow(0px 0px 0px white);
        }

    </style>
</head>
<body>
<div class="block clearfix">
    <div id="userCenter01" class="userCenterBox boxCenterList clearfix" style="_height:1%;">
        <table width="100%" align="center" border="0" cellpadding="5"
               cellspacing="1" bgcolor="#dddddd">
            <tr>
                <td  bgcolor="#cc33ff" align="right" width="120px">区域信息：</td>
                <td bgcolor="#cc33ff">
                    <!-- 省 -->
                    <select id="province" name="provinceZh" onchange="changeCity()">
                        <option value="">-- 请选择省 --</option>
                    </select>&nbsp;&nbsp;&nbsp;
                    <!-- 市 -->
                    <select id="city" name="leaderZh" onchange="changeDistrict()">
                        <option value="">-- 请选择市 --</option>
                    </select>
                    <div id="userCenter02">
                        <!-- 县(区) -->
                        <form action="/login/getId" method="get">
                            <select id="district" name="cityZh" onchange="changeDhiddenValue()">
                                <option value="">-- 请选择县(区) --</option>
                            </select>
                            <input type="submit" value="ID查询">
                        </form>
                    </div>
                    <!--                    <input type="button" value="NAME查询" onclick="getName()">-->
                    <!-- 添加隐藏域，用来提交给后台省市区对应的中文名 -->
                    <input type="hidden" name="phidden" id="phidden">
                    <input type="hidden" name="chidden" id="chidden">
                    <input type="hidden" name="dhidden" id="dhidden">
                </td>
            </tr>
        </table>
    </div>
    <ul id="ul4">
        <li id="wen3li">
            <h5 id="wen3">城市:
                <th th:text="${names.data.city}"></th>
            </h5>
        </li>
    </ul>
    <ul id="ul2">
        <li id="wen1li">
            <h5 id="wen1">温度:
                <th th:text="${names.data.wendu}"></th>
            </h5>
        </li>
    </ul>

    <ul id="ul3">
        <li id="wen2li">
            <h5 id="wen2">温馨提示:
                <th th:text="${names.data.ganmao}"></th>
            </h5>
        </li>
    </ul>
    <ul id="ul1">
        <li class="li1" id="li11">
            <h3 class="h3">日期:
                <th th:text="${names.data.forecast[0].date}"></th>
            </h3>

            <h3 class="h3">天气：
                <th th:text="${names.data.forecast[0].type}"></th>
            </h3>

            <h3 class="h3">高温：
                <th th:text="${names.data.forecast[0].high}"></th>
            </h3>

            <h3 class="h3">低温：
                <th th:text="${names.data.forecast[0].low}"></th>
            </h3>

            <h3 class="h3">风向：
                <th th:text="${names.data.forecast[0].fengxiang}"></th>
            </h3>

            <h3 class="h3">风力：
                <th th:text="${names.data.forecast[0].fengli}"></th>
            </h3>

        </li>
        <li class="li1" id="li12">
            <h3 class="h3">日期：
                <th th:text="${names.data.forecast[1].date}"></th>
            </h3>

            <h3 class="h3">天气：
                <th th:text="${names.data.forecast[1].type}"></th>
            </h3>

            <h3 class="h3">高温：
                <th th:text="${names.data.forecast[1].high}"></th>
            </h3>

            <h3 class="h3">低温：
                <th th:text="${names.data.forecast[1].low}"></th>
            </h3>

            <h3 class="h3">风向：
                <th th:text="${names.data.forecast[1].fengxiang}"></th>
            </h3>

            <h3 class="h3">风力：
                <th th:text="${names.data.forecast[1].fengli}"></th>
            </h3>

        </li>
        <li class="li1" id="li13">
            <h3 class="h3">日期：
                <th th:text="${names.data.forecast[2].date}"></th>
            </h3>

            <h3 class="h3">天气：
                <th th:text="${names.data.forecast[2].type}"></th>
            </h3>

            <h3 class="h3">高温：
                <th th:text="${names.data.forecast[2].high}"></th>
            </h3>

            <h3 class="h3">低温：
                <th th:text="${names.data.forecast[2].low}"></th>
            </h3>

            <h3 class="h3">风向：
                <th th:text="${names.data.forecast[2].fengxiang}"></th>
            </h3>

            <h3 class="h3">风力：
                <th th:text="${names.data.forecast[2].fengli}"></th>
            </h3>

        </li>
        <li class="li1" id="li14">
            <h3 class="h3">日期：
                <th th:text="${names.data.forecast[3].date}"></th>
            </h3>

            <h3 class="h3">天气：
                <th th:text="${names.data.forecast[3].type}"></th>
            </h3>

            <h3 class="h3">高温：
                <th th:text="${names.data.forecast[3].high}"></th>
            </h3>

            <h3 class="h3">低温：
                <th th:text="${names.data.forecast[3].low}"></th>
            </h3>

            <h3 class="h3">风向：
                <th th:text="${names.data.forecast[3].fengxiang}"></th>
            </h3>

            <h3 class="h3">风力：
                <th th:text="${names.data.forecast[3].fengli}"></th>
            </h3>

        </li>
        <li class="li1" id="li15">
            <h3 class="h3">日期：
                <th th:text="${names.data.forecast[4].date}"></th>
            </h3>

            <h3 class="h3">天气：
                <th th:text="${names.data.forecast[4].type}"></th>
            </h3>

            <h3 class="h3">高温：
                <th th:text="${names.data.forecast[4].high}"></th>
            </h3>

            <h3 class="h3">低温：
                <th th:text="${names.data.forecast[4].low}"></th>
            </h3>

            <h3 class="h3">风向：
                <th th:text="${names.data.forecast[4].fengxiang}"></th>
            </h3>

            <h3  class="h3">风力：
                <th th:text="${names.data.forecast[4].fengli}"></th>
            </h3>

        </li>
    </ul>
</div>
</body>
<script src="../../bootstrap/js/jquery.js"></script>
<script type="text/javascript">
    var arr=
    $(function () {
        $.ajax({
            type: "POST",
            url: "/login/getProvince",
            data: {"cZh": "中国"},
            dataType: "json",
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    var $option = $("<option value='" + data[i].provinceZh + "'>" + data[i].provinceZh + "</option>");
                    $("#province").append($option);
                }
            }
        });
    });

    function changeCity() {
        //当省的内容发生变化的时候，响应的改变省的隐藏域的值
        $("#phidden").val($("#province option:selected").html());
        //页面加载完成，将省的信息加载完成
        //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
        var pid = $("#province").val();
        $.ajax({
            url: "/login/getCity",
            data: {"cZh": pid},
            dataType: "json",
            success: function (data) {
                //清空城市下拉列表框的内容
                $("#city").html("<option value=''>-- 请选择市 --</option>");
                $("#district").html("<option value=''>-- 请选择区/县 --</option>");
                //遍历json，json数组中每一个json，都对应一个省的信息，都应该在省的下拉列表框下面添加一个<option>
                for (var i = 0; i < data.length; i++) {
                    var $option = $("<option value='" + data[i].leaderZh + "'>" + data[i].leaderZh + "</option>");
                    $("#city").append($option);
                }
            }
        });
    }

    function changeDistrict() {
        //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值
        $("#chidden").val($("#city option:selected").html());
        //页面加载完成，将省的信息加载完成
        //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
        var pid = $("#city").val();
        $.ajax({
            url: "/login/getDistrict",
            data: {"cZh": pid},
            dataType: "json",
            success: function (data) {
                //清空城市下拉列表框的内容
                $("#district").html("<option value=''>-- 请选择区/县 --</option>");
                for (var i = 0; i < data.length; i++) {
                    var $option = $("<option value='" + data[i].id + "'>" + data[i].cityZh + "</option>");
                    $("#district").append($option);
                }
            }
        });
    }

    function getName() {

        //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
        var pid = $("#city").val();
        $.ajax({
            url: "/login/getName",
            data: {"cZh": pid},
            dataType: "json",

        });
    }

    function getId() {

        //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
        var pid = $("#district").val();
        $.ajax({
            url: "/login/getId",
            data: {"cZh": pid},
            dataType: "json",
            // success: function (data) {
            //     data;
            //
            // }
        });
    }

    function changeDhiddenValue() {
        //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值
        $("#dhidden").val($("#district option:selected").html());
    }

</script>
</html>